<template>
  <div class="selectMenubxo">
    <div class="title">
      <div class="sureBtn" @click="cancle">cancel</div>
      <div class="titletx">My product</div>
      <div class="sureBtn" @click="sure">confirm</div>
    </div>
    <ul class="selectMenuUl">
       <li class="selectMenuli" v-if="dcshow">
        <div class="menuli-l">
          <van-icon class="icon" :name="newsTitle['dc'].icon" />{{newsTitle['dc'].title}}
        </div>
        <div class="menuli-r">
          <van-switch
            v-model=" menuStatus.dc"
            size="20px"
            active-color="#1F87E5"
            inactive-color="#FFF9F0"
          />
        </div>
      </li>
      <li class="selectMenuli" v-if="tclshow">
        <div class="menuli-l">
          <van-icon class="icon" :name="newsTitle['tcl'].icon" />{{newsTitle['tcl'].title}}
        </div>
        <div class="menuli-r">
          <van-switch
            v-model="menuStatus.tcl"
            size="20px"
            active-color="#1F87E5"
            inactive-color="#FFF9F0"
          />
        </div>
      </li>
     
      <li class="selectMenuli" v-if="dlgshow">
        <div class="menuli-l">
          <van-icon class="icon" :name="newsTitle['dlg'].icon" />{{newsTitle['dlg'].title}}
        </div>
        <div class="menuli-r">
          <van-switch
            v-model="menuStatus.dlg"
            size="20px"
            active-color="#1F87E5"
            inactive-color="#FFF9F0"
          />
        </div>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
import { newsTitle } from "../../assets/data/menuData.js";
import { setmymenubar } from "../../api/sort.js";
 
export default {
  data() {
    return {
      newsTitle,
      menuStatus: {},
      dcshow: true,
      tclshow: true,
      dlgshow: true
    };
  },

  created() {
    this.menuStatusLocal();
  },
  methods: {
    cancle() {
      this.$store.dispatch("acNomymenuShow", false);
    },
    sure() {
      this.$store.dispatch("acNomymenuShow", false);
      let tokenid = this.$store.state.islogin;
      let params = {};

      for (const key in this.menuStatus) {
        if (this.menuStatus.hasOwnProperty(key)) {
          const ele = this.menuStatus[key];
          params[key] = ele ? "1" : "0";
        }
      }

      let obj = {
        mymenu: JSON.stringify(params)
      };

      if (tokenid) {
        setmymenubar(obj).then(res => {
          this.$store.dispatch("acmymenu", params);
          this.$router.push({ name: "centerzh" });
        });
      } else {
        this.$store.dispatch("acmymenu", params);
        this.$router.push({ name: "centerzh" });
      }
    },
    menuStatusLocal() {
     
      let obj = {};
      // if (this.$store.state.islogin) {
      //   obj = this.$store.state.loginInforXl.mymenu;
      //   this.tclshow = this.$store.state.loginInforXl.is_ts == 1 ? true : false;
      //   this.dcshow = this.$store.state.loginInforXl.is_dc == 1 ? true : false;
      //   this.dlgshow = this.$store.state.loginInforXl.is_gt == 1 ? true : false;
      // } else {
        obj = this.$store.state.mymenu;
      // }
      let temp = {};
      Object.keys(obj).forEach(key => {
       
        if (obj[key] == 1) {
          temp[key] = true;
        } else {
          temp[key] = false;
        }
      });
      this.menuStatus = temp;
 
      return this.menuStatus;
    }
  }
};
</script>

<style scoped lang="less">
.selectMenubxo {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #ffffff;
  z-index: 2111;
  padding: 0 0.3rem;
  .title {
    line-height: 1.2rem;
    font-size: 0.36rem;
    font-weight: bolder;
    color: rgba(21, 23, 35, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sureBtn {
      font-size: 0.28rem;
      font-weight: normal;
    }
  }
  .selectMenuUl {
    .selectMenuli {
      width: 6.9rem;
      height: 1.08rem;
      background: rgba(249, 249, 249, 1);
      border-radius: 0.16rem;
      padding: 0 0.3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3rem;
      .icon {
        margin-right: 0.1rem;
      }
    }
  }
}
</style>
